<template>
  <div class="custom-style fixed-segmented">
    <el-segmented 
      v-model="value" 
      :options="options" 
      @change="handleSegmentChange" 
      class="smooth-transition"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const value = ref('中国'); // 默认选项
const options = ['中国', '世界'];

const router = useRouter();

// 防抖处理函数
let timeout: ReturnType<typeof setTimeout> | null = null;
const handleSegmentChange = (newValue: string) => {
  if (timeout) clearTimeout(timeout); // 清除之前的定时器
  timeout = setTimeout(() => {
    switch (newValue) {
      case '中国':
        router.push('/China'); // 跳转到中国页面
        break;
      case '世界':
        router.push('/World'); // 跳转到世界页面
        break;
      default:
        console.warn(`No route defined for option: ${newValue}`);
    }
  }, 200); // 添加延迟以确保动画展示
};
</script>

<style scoped>
/* 自定义 segmented 样式 */
.custom-style {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
}

/* 定位样式 */
.fixed-segmented {
  position: fixed;
  top: 35px;  /* 调整顶部位置 */
  right: 50px;  /* 新增左侧位置 */
  z-index: 1000;
  width: auto; /* 自动调整宽度 */
  max-width: 300px; /* 最大宽度设置 */
}

/* 平滑切换动画 */
.smooth-transition {
  transition: all 0.3s ease-in-out;
}

/* 默认字体样式 */
.el-segmented__item {
  font-family: YouYuan;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  transition: all 0.3s ease-in-out;
}

/* 选中状态 */
.el-segmented__item.is-active {
  font-size: 18px; /* 选中时字体稍大 */
  font-weight: 900; /* 选中时更粗 */
  color: #000;
  transform: scale(1.1); /* 添加轻微缩放 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}
</style>
